@mixin w {
  width: 1226px;
  margin: 0 auto;
}

header {
  width: 100%;

  .top {
    width: 100%;
    height: 120px;
    // background-color: red;
    background-image: url('../assets/images/S-top.jpg');
    background-position: center;
    background-size: auto 120px;
    background-repeat: no-repeat;

  }

  .nav {
    width: 100%;
    background-color: #333333;

    .nav-wrapper {
      in
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 1226px;
      height: 40px;

      .nav-p {
        margin-left: 4.44%;
        width: 60%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        >a {
          >li {
            font-size: 12PX;
            color: #b0b0b0;

            &:hover {
              color: white;
            }
          }

        }


        .ver-line {
          margin: 0px 7px;
          height: 12px;
          width: 1px;
          background-color: #424242;
        }
      }

      .list {
        position: relative;
        margin: 0;
        padding: 0;
        font-size: 12px;

        >ul {
          >li {
            padding: 0 19px;
            position: relative;
            float: left;
            font-size: 12px;
            background-color: #333;
            color: #b0b0b0;
            line-height: 40px;
            height: 40px;
            overflow: hidden;

            >p {
              display: inline-block;
              margin: 0 6px;
              font-weight: bold;
              transform: rotate(90deg);
            }

            .box {
              background-color: #fff;
              display: block;
              position: absolute;
              opacity: 0;
              // bottom: -100px;
              left: 0;
              width: 100px;
              // height: 100px;
              line-height: 28px;
              text-align: center;
              font-size: 12px;
              // transition: all 2s ease-in;

              >ul {
                >a {
                  >li {
                    color: #000;

                    &:hover {
                      color: #FF6700;
                    }

                  }

                }
              }
            }
          }

          >li:hover {
            background-color: #fff;
            overflow: visible;
            color: #FF6700;
            cursor: pointer;
          }

          >li:hover .box {
            display: block;
            opacity: 1;
            color: #FF6700;
          }
        }

        .clear {
          clear: both;
        }
      }

      .nav-r {
        width: 11%;
        margin-left: 47px;
      }

      .shopping {
        height: 100%;
        line-height: 40px;
        font-size: 12px;
        color: #b0b0b0;
        cursor: pointer;

        &:hover {
          background-color: #fff;
          color: #FF6700;
        }
      }

    }


  }
}

footer {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-start;
  padding: 30px 0 30px 50px;
  font-size: 12px;
  background: #fafafa;

  .foot-left {
    margin-right: 10px;
  }

  .foot-right {
    .foot-text-one {
      ul {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        li {
          line-height: 18px;

          a {
            font-size: 12px;
            color: #757575;
            cursor: pointer;

            &:hover {
              color: #FF6700;
            }
          }
        }

        span {
          margin: 0 5px;
          width: 1px;
          height: 12px;
          background-color: #b0b0b0;
        }
      }
    }

    .foot-text-two {
      p {
        a {
          font-size: 12px;
          color: #b0b0b0;
          cursor: pointer;
        }

        .light {
          &:hover {
            color: #FF6700;
          }
        }
      }
    }
  }

  .foot-img {
    margin: 4px 0 15px;

    >a {
      img:first-child {
        width: 82px;
        height: 28px;
      }

      >div {
        display: inline-block;
        width: 105px;
        height: 40px;
        overflow: hidden;

        .foot-last {
          width: 105px;
          height: 40px;
        }
      }
    }
  }

  .foot-text-three {
    text-align: center;
    margin: 30px auto 0;
    font-family: '宋体';
    font-size: 28px;
    font-weight: bolder;
    color: #b0b0b0;
  }
}